<template>
  <div class="container">
    <div class="activty-head"></div>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :xs="24" :sm="24">
        <div class="activity-ul">
          <ul v-for="(v,k) in caractivty " :key="k">
            <li class="caractivity">
              <el-row>
                <el-col :md="14">
                  <div class="activityPic">
                    <img :src="getpic(v.activityPic)" width="100%" height="100%" />
                  </div>
                </el-col>
                <el-col :md="10">
                  <div>
                    <div class="activityHead">{{v.activityHead}}</div>
                    <div class="activityDate">
                      活动时间：
                      <span>{{v.activityDate | dateDay}}</span>
                    </div>
                    <el-row>
                      <el-col :xs="24" :sm="16">
                        <div>&nbsp;</div>
                      </el-col>
                      <el-col :xs="24" :sm="7">
                        <div class="todetail" @click="activityId=v.activityId,getActivity()">立即查看</div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <div></div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      caractivty: [],
      activityId: "",
      activtydetail: []
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    getActivity: function() {
      // console.log(this.activityId);
      this.$router.push({
        name: "ActivityDetail",
        params: { activityId: this.activityId }
      });
    },

    getpic(pic) {
      // console.log('ha',pic)
      let path = "http://localhost:3000/upload/" + pic;
      // console.log("图片", path);
      return path;
    }
  },
  created() {
    this.$axios
      .get("http://localhost:3000/ShowAllActvity")
      .then(res => {
        // console.log("查询结果：", res.data.data);
        //  console.log(res.data.data)
        this.caractivty = res.data.data;
      })
      .catch(err => {
        // console.log("错误信息：", err);
      });
  }
};
</script>
<style>
.container {
  padding: 0;
  width: 100%;
  margin: 0 auto;
}
.activty-head {
  height: 200px;
  width: 100%;
  background-image: url("../assets/GYQ/activityh.png");
  background-position: center center;
}

.container ul {
  margin: 0 auto;
  width: 100%;
}
.caractivity {
  background-color: white;
  margin-bottom: 10px;
  margin-top: 20px;
}
.caractivity:hover {
  box-shadow: 1px 2px 10px 2px #ac9c9c;
}
.activityPic {
  height: 300px;
}
.activityHead {
  height: 150px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
}
.activityDate {
  color: #ac9c9c;
  height: 80px;
  line-height: 50px;
}
.activityDate span {
  height: 80px;
  color: rgb(223, 201, 10);
}
.todetail {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgb(90, 90, 206);
  color: white;
}
.todetail:hover {
  cursor: pointer;
}
@media (max-width: 620px) {
  .activityPic {
    height: 200px;
    background-color: rgb(192, 192, 201);
  }
  .caractivity {
    box-shadow: 1px 2px 10px 2px #ac9c9c;
  }
  .activityHead {
    height: 50px;
  }
  .activityDate {
    height: 30px;
  }
}
</style>
